<template>
  <div class="edit">
    <div class="index-info p_r">
      <template>
        <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane key="1" tab="人员管理">
            <!-- <rygl
              ref="rygl"
              @updateDptUser="updateDptUser"
              @ryonSelect="ryonSelect"
            ></rygl> -->
          </a-tab-pane>
          <a-tab-pane key="2" tab="部门管理" force-render>
            <ddtsz ref="ddtsz" @onSelectddt="onSelectddt"></ddtsz>
          </a-tab-pane>
          <a-tab-pane key="3" tab="系统管理员">
            <glysz ref="glysz" @editgly="editgly"></glysz>
          </a-tab-pane>
          <!-- <a-tab-pane key="7" tab="运营商管理">
            <glysz ref="glysz" @editgly="editgly"></glysz>
          </a-tab-pane> -->
          
          <a-tab-pane key="5" tab="人员审核">
            <div class="sh_content">
              <a-input-search
                placeholder="警务"
                style="width: 100%"
                @search="onSearch"
              />
              <ul class="sh-ul clear">
                <li
                  @click="select('')"
                  :class="selectkey == '' ? 'active-color' : ''"
                >
                  全部
                </li>
                <li
                  @click="select('0')"
                  :class="selectkey == '0' ? 'active-color' : ''"
                >
                  已通过
                </li>
                <li
                  @click="select('1')"
                  :class="selectkey == '1' ? 'active-color' : ''"
                >
                  已拒绝
                </li>
                <li
                  @click="select('2')"
                  :class="selectkey == '2' ? 'active-color' : ''"
                >
                  未解决
                </li>
              </ul>
              <div>
                <div class="sh-list">
                  <div class="sh-pj">
                    <div
                      class="sh-list-first"
                      v-for="item in auditList"
                      :key="item.message"
                    >
                      <div>
                        <div class="sh-small-title">
                          <span>企业名称:{{ item.personOrgName }}</span>
                          <span v-if="item.auditStatus == 0">已通过</span>
                          <span v-if="item.auditStatus == 1">已拒绝</span>
                          <span v-if="item.auditStatus == 2">未解决</span>
                        </div>
                        <p>姓名:{{ item.userRealName }}</p>
                        <p></p>
                        <p>电话:{{ item.userMobile }}</p>
                        <p></p>
                        <p>所属单位:{{ item.personOrgName }}</p>
                        <p></p>
                        <div style="margin-top: 10px">
                          <a-button
                            size="small"
                            type="danger"
                            @click="showAuditTimeAction(item, 1)"
                          >
                            拒绝
                          </a-button>
                          <a-button
                            class="fr"
                            size="small"
                            type="primary"
                            @click="showAuditTimeAction(item, 0)"
                          >
                            同意
                          </a-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="6" tab="密码修改" v-if="opt.includes('HTSZ')">
            <div class="revise-info">
              <form>
                <h4>●&nbsp;更改密码</h4>

                <p>
                  <label class="w"> </label>
                </p>
                <p>
                  <input
                    type="password"
                    v-model="formData.oldPassword"
                    placeholder="原始密码"
                  />
                </p>

                <p>
                  <label class="w">新密码</label>
                </p>
                <p>
                  <input
                    type="password"
                    v-model="formData.userPassword"
                    placeholder="新密码"
                  />
                </p>

                <p>
                  <label class="w">确认密码</label>
                </p>
                <p>
                  <input
                    type="password"
                    v-model="formData.newuserPassword"
                    placeholder="确认密码"
                  />
                </p>

                <p>
                  <button class="but-add" type="button" @click="savePassword">
                    保存
                  </button>
                </p>
              </form>
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" tab="权限组">
            <qxsz
              ref="qxsz"
              @editAuthGroup="editAuthGroup"
              @lookItemGroupAuth="lookItemGroupAuth"
            ></qxsz>
          </a-tab-pane>
        </a-tabs>
        <section class="ddt_btn">
          <ddtszpop
            @handleDptUserSaveddt="handleDptUserSaveddt"
            @showddtpop="showddtpop"
            @cancelformddt="cancelformddt"
            :ddtvisible="ddtvisible"
            v-if="key == '2'"
          ></ddtszpop>
        </section>
        <section class="gly_btn">
          <glyszpop
            v-if="key == '3'"
            :glyvisible="glyvisible"
            :setKey="key"
            :editglyflag="editglyflag"
            :userOprInfo="userOprInfo"
            @handleDptUserSavegly="handleDptUserSavegly"
            @cancelformgly="cancelformgly"
            @showglypop="showglypop"
          ></glyszpop>
        </section>

        <section class="gly_btn">
          <dxglyszpop
            v-if="key == '7'"
            :glyvisible="glyvisible"
            :setKey="key"
            :editglyflag="editglyflag"
            :userOprInfo="userOprInfo"
            @handleDptUserSavegly="handleDptUserSavegly"
            @cancelformgly="cancelformgly"
            @showglypop="showglypop"
          ></dxglyszpop>
        </section>

        <section class="ry_btn">
          <ryglpop
            @handleDptUserSave="handleDptUserSave"
            @showryglpop="showryglpop"
            @rycolse="rycolse"
            :ryvisible="ryvisible"
            v-if="key == '1'"
            :userInfoDpt="userInfoDpt"
            :updateUserId="updateUserId"
          ></ryglpop>
        </section>
        <section class="qx_btn">
          <qxszpop
            :qxvisible="qxvisible"
            :authGroupInfo="authGroupInfo"
            :editflag="editflag"
            v-if="key == '4'"
            @showqxszpop="showqxszpop"
            @cancelform="cancelform"
            @addqx="addqx"
            @deletefenzu="deletefenzu"
          ></qxszpop>
        </section>
        <a-button
          v-if="key == '5'"
          class="mr20"
          type="primary"
          @click="importXls"
          >导入</a-button
        >
        <a-button v-if="key == '5'" class="mr20" type="primary">
          <a href="https://zhuihui.zhichuxing.com/moban.xlsx" download>导出</a>
        </a-button>
        <input
          type="file"
          style="display: none"
          id="uploadxls"
          @change="fileChange($event)"
        />
      </template>
    </div>
    <a-modal
      :visible="showAuditTime"
      :footer="null"
      :closable="false"
      @cancel="showAuditTime = false"
      :maskClosable="false"
    >
      <h4
        style="
          font: 16px/16px 'Mircrosoft YaHei';
          margin-bottom: 20px;
          text-align: center;
        "
      >
        过期时间
      </h4>
      <a-form-model
        :model="auditForm"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="过期时间" required>
          <a-input-number
            v-model="auditForm.expireTime"
            @change="changeTime"
            :min="1"
          /><span style="margin-left: 5px">天</span>
        </a-form-model-item>
        <a-form-model-item
          :wrapper-col="{ span: 14, offset: 4 }"
          style="margin-top: 20px"
        >
          <a-button type="primary" @click="onSubmit"> 确定 </a-button>
          <a-button style="margin-left: 10px" @click="showAuditTime = false">
            取消
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    
  </div>
</template>

<script>
//管理员设置
import rygl from "./components/rygl.vue";
import ryglpop from "./components/ryglpop.vue";
import ddtsz from "./components/ddtsz.vue";
import ddtszpop from "./components/ddtszpop.vue";
import glysz from "./components/glysz.vue";
import glyszpop from "./components/glyszpop.vue";
import dxglyszpop from "./components/dxglyszpop.vue";
import qxsz from "./components/qxsz.vue";
import qxszpop from "./components/qxszpop.vue";
import { message } from "ant-design-vue";
import { mapMutations, mapGetters, mapState } from "vuex";
import { formatDate } from "@/utils/formatDate";

export default {
  components: {
    rygl,
    ryglpop,
    ddtsz,
    ddtszpop,
    glysz,
    glyszpop,
    dxglyszpop,
    qxsz,
    qxszpop,
  },
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 12 },
      auditForm: {
        expireTime: "",
      },
      showAuditTime: false, //展示过期时间modal
      //必要参数
      ddtvisible: false,
      edititem: {},
      ryselectedKeys: [],
      ryinfo: {},
      selectedKeys: [],
      key: "1",

      //管理员管理
      glydata: [],
      glyvisible: false,
      editglyflag: false,
      // 人员编辑或者新增人员信息
      userOprInfo: {
        userCode: "",
        userPassword: "",
        userMobile: "",
        userRealName: "",
        userEmail: "",
        addFlag: "",
        roleCode: "",
      },

      //人员管理

      ryvisible: false,

      // 修改人员管理中的人员的id
      updateUserId: "",
      // 人员编辑或者新增人员信息
      userInfoDpt: {
        personOrgName: "",
        personOrgCode: "",
        personPostCode: "",
        personPostName: "",
        userRealName: "",
        userMobile: "",
        addFlag: "",
        userCode: "",
        // personOrgCodeAll: [],
      },

      //权限设置
      qxvisible: false,
      editflag: false,
      authGroupInfo: {
        roleCode: "",
        roleName: "",
        operCodeList: [],
      },

      //审核信息
      selectkey: "",
      auditList: [],

      //密码更改
      formData: {
        oldPassword: "",
        userPassword: "",
        newuserPassword: "",
      },

      rules: {
        //修改密码
        oldPassword: {
          required: true,
          message: " 不能为空",
        },
        userPassword: {
          required: true,
          message: "新密码不能为空",
        },
        newuserPassword: {
          required: true,
          message: "确认密码不能为空",
        },
      },
      showAnswer: false,
      context: "",
      answerFrom:''
    };
  },

  mounted() {
    // this.select();

  },
  computed: {
    ...mapGetters(["token", "userInfo"]),
    ...mapState(["opt"]),
  },
  methods: {
    changeTime(value) {
      console.log(value);
      this.auditForm.expireTime = value;
    },
    showAuditTimeAction(item, flag) {
      this.showAuditTime = true;
      this.auditForm.code = item.userCode;
      this.auditForm.status = flag;
    },
    onSubmit() {
      if (this.auditForm.expireTime == "" || !this.auditForm.expireTime) {
        message.error("请填写过期时间");
        return false;
      }
      let timeStamp =
        new Date().getTime() + this.auditForm.expireTime * 86400000;
      let date = new Date(timeStamp);
      let expireTime = formatDate(date, "yyyy-MM-dd hh:mm:ss");
      let params = { ...this.auditForm, expireTime };
      this.$post("/exter/manage/audit", params).then((result) => {
        if (this.auditForm.flag == 0) {
          this.$message.info("已拒绝");
        } else {
          this.$message.info("已同意");
        }
        this.auditForm.expireTime = "";
        this.showAuditTime = false;
        this.queryAuditList();
      });
    },
    importXls() {
      let uploadxls = document.getElementById("uploadxls");
      console.log(uploadxls);
      uploadxls.click();
    },
    fileChange(event) {
      let file = event.target.files[0];
      this.$upFile("/exter/upload/userExcel", {
        uploadFile: file,
      }).then((result) => {
        message.info("上传成功");
      });
    },
    ...mapMutations(["clearState", "setFlag"]),
    //ddt
    cancelformddt() {
      this.ddtvisible = false;
    },
    showddtpop() {
      this.ddtvisible = true;
    },
    handleDptUserSaveddt() {
      this.$refs.ddtsz.getDptList();
      this.$refs.ddtsz.onSelectddt(this.selectedKeys);
    },
    onSelectddt(selectedKeys) {
      this.selectedKeys = selectedKeys;
    },
    //ry
    ryonSelect(selectedKeys, info) {
      this.ryselectedKeys = selectedKeys;
      this.ryinfo = info;
    },
    handleDptUserSave() {
      this.rycolse();

      this.$refs.rygl.onSelect(this.ryselectedKeys, this.ryinfo);
    },
    updateDptUser(item) {
      this.ryvisible = true;
      this.updateUserId = item.userCode;
      this.userInfoDpt.personOrgName = item.personOrgName;
      this.userInfoDpt.personOrgCode = item.personOrgCode;
      this.userInfoDpt.personPostCode = item.personPostCode;
      this.userInfoDpt.personPostName = item.personPostName;
      this.userInfoDpt.userRealName = item.userRealName;
      this.userInfoDpt.userMobile = item.userMobile;
      this.userInfoDpt.userCode = item.userCode;
      // this.userInfoDpt.personOrgCodeAll = item.personOrgCodeAll;
    },
    showryglpop() {
      this.ryvisible = true;
      this.updateUserId = "";
      this.userInfoDpt.personOrgName = "";
      this.userInfoDpt.personOrgCode = "";
      this.userInfoDpt.personPostCode = "";
      this.userInfoDpt.personPostName = "";
      this.userInfoDpt.userRealName = "";
      this.userInfoDpt.userMobile = "";
      this.userInfoDpt.userCode = "";
      // this.userInfoDpt.personOrgCodeAll = [];
    },
    rycolse() {
      this.ryvisible = false;
      this.updateUserId = "";
      this.userInfoDpt.personOrgName = "";
      this.userInfoDpt.personOrgCode = "";
      this.userInfoDpt.personPostCode = "";
      this.userInfoDpt.personPostName = "";
      this.userInfoDpt.userRealName = "";
      this.userInfoDpt.userMobile = "";
      this.userInfoDpt.userCode = "";
      // this.userInfoDpt.personOrgCodeAll = [];
    },

    //管理员管理
    editgly(item) {
      console.log("修改管理员", item);
      this.glyvisible = true;
      this.editglyflag = true;
      this.userOprInfo.addFlag = item.addFlag;
      this.userOprInfo.userCode = item.userCode;
      this.userOprInfo.userPassword = item.userPassword;
      this.userOprInfo.userMobile = item.userMobile;
      this.userOprInfo.userRealName = item.userRealName;
      this.userOprInfo.userEmail = item.userEmail;
      this.userOprInfo.roleCode = item.roleVOList[0].roleCode;
    },

    handleDptUserSavegly() {
      this.$refs.glysz.getOwerUserInfo();
      this.cancelformgly();
    },
    showglypop() {
      this.glyvisible = true;
      this.userOprInfo = {
        userCode: "",
        userPassword: "",
        userMobile: "",
        userRealName: "",
        userEmail: "",
        addFlag: "",
        roleCode: "",
      };
      this.editglyflag = false;
    },
    cancelformgly() {
      this.glyvisible = false;
      this.userOprInfo = {
        userCode: "",
        userPassword: "",
        userMobile: "",
        userRealName: "",
        userEmail: "",
        addFlag: "",
        roleCode: "",
      };
      this.editglyflag = false;
    },

    //qx
    deletefenzu() {
      this.$refs.qxsz.deletefenzufu();
    },
    lookItemGroupAuth(item) {
      this.edititem = item;
    },
    addqx() {
      this.cancelform();
      this.$refs.qxsz.queryOwerOperatorGrop();
      this.$refs.qxsz.lookItemGroupAuth(this.edititem);
    },
    editAuthGroup(editcode) {
      console.log(editcode);
      this.editflag = true;
      let arr = [];
      this.$post("/exter/manage/catOperatorGrop", {
        paramVar: editcode,
      }).then((result) => {
        this.$nextTick(() => {
          this.qxvisible = true;
          this.authGroupInfo.roleCode = result.buss.roleCode;
          this.authGroupInfo.roleName = result.buss.roleName;
          result.buss.operCodeList.forEach((element) => {
            arr.push(element.operateCode);
          });
          this.authGroupInfo.operCodeList = arr;
        });
      });
    },

    showqxszpop() {
      this.qxvisible = true;
      this.editflag = false;
      this.authGroupInfo.roleCode = "";
      this.authGroupInfo.roleName = "";
      this.authGroupInfo.operCodeList = [];
    },
    cancelform() {
      this.qxvisible = false;
      this.editflag = false;
      this.authGroupInfo.roleCode = "";
      this.authGroupInfo.roleName = "";
      this.authGroupInfo.operCodeList = [];
    },

    onSearch(value) {
      let checkFlag = this.selectkey;
      let personClass = "1";
      console.log(value);
      this.$post("/exter/manage/getAuditEmpList", {
        checkFlag,
        personClass,
        paramVar: value,
      }).then((result) => {
        console.log(result);
        this.auditList = result.buss || [];
      });
    },
    select(num) {
      this.selectkey = num || "";
      this.$forceUpdate();
      this.queryAuditList();
    },
    queryAuditList() {
      let params = {
        checkFlag: this.selectkey,
        personClass: 1,
        paramVar: "",
      };
      this.$post("/exter/manage/getAuditEmpList", { ...params }).then(
        (result) => {
          console.log(result);
          this.auditList = result.buss || [];
        }
      );
    },
    //修改密码
    savePassword() {
      let params = {
        userCode: this.userInfo.userCode,
        oldPassword: this.formData.oldPassword,
        userPassword: this.formData.userPassword,
      };
      if (this.formData.oldPassword == "") {
        message.error("原密码不能为空");
        return;
      }
      if (this.formData.userPassword == "") {
        message.error("新密码不能为空");
        return;
      }
      if (this.formData.newuserPassword == "") {
        message.error("确认密码不能为空");
        return;
      }

      if (this.formData.userPassword != this.formData.newuserPassword) {
        message.error("两次密码输入不一致");
        return;
      }
      this.$post("/exter/manage/changePasswordByUserCode", params).then(
        (result) => {
          console.log(result);
          this.clearState();
          this.$router.replace("/login");
        }
      );
    },
    callback(key) {
      this.key = key;
    },
  },
};
</script>

<style scoped lang='less'>
.index-info {
  color: white;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 40px;
  margin: 9px auto 0;
  background: #0a2d67;
  min-height: 100vh;
  > div {
    width: 100%;
  }

  //权限设置
  .qx_btn {
    position: absolute;
    top: 48px;
    right: 20px;
  }

  //审核信息
  .sh_content {
    height: 80vh;
    overflow: hidden;
    overflow-y: auto;
    background: #1d4292;
    padding: 40px;
    .sh-ul {
      clear: both;
      li {
        float: left;
        margin: 20px;
        cursor: pointer;
      }
      li:hover {
        color: #22f4f5;
      }
    }
    .sh-pj {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      .sh-list-first {
        width: 250px;
        border-radius: 10px;
        background: #3258e9;
        padding: 15px;
        font-size: 14px;
        line-height: 30px;
        margin-top: 35px;
        margin-left: 30px;
        .sh-small-title {
          display: flex;
          color: #28d3ef;
          justify-content: space-between;
        }
      }
    }

    .active-color {
      color: #22f4f5;
    }
  }

  //修改密码
  .revise-info {
    padding: 20px;
    color: #000000;
    width: 400px;
    margin: 0 auto;
    border-radius: 10px;
    background: white;
    padding-bottom: 20px;
    /* margin-top: 14px; */
    position: absolute;
    left: 46%;
    top: 28%;
    margin-left: -150px;
    line-height: 32px;
    font-size: 15px;
    h4 {
      margin-top: 10px;
      font-size: 16px;
      margin-bottom: 10px;
      color: #71abfd;
      font-weight: bold;
    }

    input {
      width: 100%;
      border: none;
      outline: none;
      background: #eeeeee;
      height: 30px;
      border-radius: 10px;
      padding-left: 10px;
      font-size: 13px;
      font-weight: normal;
    }
    .but-add {
      margin-bottom: 20px;
      height: 40px;
      border-radius: 50px;
      margin: 0 auto;
      display: block;
      background-color: #00c9d9;
      width: 80% !important;
      margin: 0 auto;
      border: none !important;
      color: white;
      outline: hidden;
      margin-top: 20px;
    }
  }
}
</style>
